<div class="form  form--search">
  <form id="contact-form" action="">
    <label class="label" for="search">Search term:</label>
    <input class="input" id="search" type="search" name="search" placeholder="e.g. About us" autocomplete="off" />

    <ul class="list  list--results" id="list">
        <!-- results go here -->
    </ul>
  </form>
</div>

<script type="text/javascript" src="{{ "/assets/scripts/fetch.js" | relative_url }}"></script>
<script type="text/javascript">
  const endpoint = '{{ "/assets/search.json" | relative_url }}';

  const pages = [];

  fetch(endpoint)
    .then(blob => blob.json())
    .then(data => pages.push(...data))

  function findResults(termToMatch, pages) {
    return pages.filter(item => {
      const regex = new RegExp(termToMatch, 'gi');
      return item.title.match(regex) || item.content.match(regex);
    });
  }

  function displayResults() {
    const resultsArray = findResults(this.value, pages);
    const html = resultsArray.map(item => {
      return `
        <li class="item  item--result">
          <article class="article  typeset">
            <h4><a href="${item.url}">${item.title}</a></h4>
            <p>${item.excerpt}</p>
          </article>
        </li>`;
    }).join('');
    if ((resultsArray.length == 0) || (this.value == '')) {
      resultsList.innerHTML = `<p>Sorry, nothing was found</p>`;
    } else {
      resultsList.innerHTML = html;
    }
  }

  const field = document.querySelector('#search');
  const resultsList = document.querySelector('#list');

  field.addEventListener('keyup', displayResults);

  field.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
      event.preventDefault();
    }
  });
</script>
<noscript>Please enable JavaScript to use the search form.</noscript>
